<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="a_height">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>left</title>
<link href="../../style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<style>

.red,.red a{color:#F00}
</style>

</head>
<!--left-->

<body class="a_height w218">
<div id="left" class="gray_border">
   
    	<div id="sidebar">    
    </div>
        <div class="left_close"></div>
    </div>

  <script>
     $(document).ready(function(){
    	  
    //获取用户的角色，并生成相应的左树
	        $.ajax({
    		type : "POST",
    		url : "getFrame!getFrame",
    		success : function(data) {
                  
                  console.log(data);
                  var aa=JSON.parse(data);
  				console.log(aa[0].name+aa[0].function_id+aa[0].function_name+aa[0].roleId+aa[0].roleName+aa[0].url);
  				console.log('id='+aa[0].roleId);
  				
  				var dl = $('<dl class="open" ></dl>');
  				var dt = $('<dt class="total_bg user_m" onclick="toggle(this)"><i class="total_bg"></i>'+aa[0].showname+'<span class="total_bg"></span></dt>');
  				dl.append(dt);
  				var i=0;
  				while(i<aa.length){
  					
  					var dd = $('<dd class="nodis" onclick="col(this)"><a href="'+aa[i].url+'" target="rightframe"><span>&middot;</span>'+aa[i].function_name+'</dd>');
  					dl.append(dd);
  					i++;
  				}	 
  			$("#sidebar").append(dl);
              }
  		
  			
    	}); 
	       
    });
 function toggle(a){
	 
	 $(a).siblings("dd").toggle(800);
		if($(this).parent("dl").hasClass("open")){
			$(this).parent("dl").removeClass("open").addClass("close");
			}else{
			$(this).parent("dl").removeClass("close").addClass("open");	
				}
	 
 }
 function col(a){
		$(a).addClass("red").siblings("dd").removeClass("red").parent("dl").siblings("dl").children("dd").removeClass("red");

 }
     </script>
</body>
</html>